import React, { FC, useState } from "react";
import styles from "./common.module.scss";
import QuestionCard from "../../components/QuestionCard";
import QuestionSearch from "../../components/QuestionSearch";
import { Typography, Empty, Spin } from "antd";
import { useTitle } from "ahooks";
import useLoadingQuestionList from "../../hooks/useLoadingQuestionList";
import ListPage from "../../components/ListPage";

const { Title } = Typography;
const List: FC = () => {
  useTitle("星问卷-星标问卷");
  const { data = {}, loading } = useLoadingQuestionList({ isStar: true });
  const { list = [], total = 0 } = data;
  const questionList = list;
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <QuestionSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: "center" }}>
            <Spin />
          </div>
        )}
        {!loading && questionList.length === 0 && (
          <Empty description="暂无数据" />
        )}
        {!loading &&
          questionList.length > 0 &&
          questionList.map((item: any) => {
            const { _id } = item;
            return <QuestionCard key={_id} {...item} />;
          })}
      </div>
      <div className={styles.footer}>
        <ListPage total={total}/>
      </div>
    </>
  );
};
export default List;
